HTML Příručka - Tag HTML

Html-Wap editor - HTML Příručka

Syntaxe | <html>...</html>
Popis | Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Pokud ale chcete mít soubory v souladu s normou, <html> tag používejte.
Atributy | Tag <html> nemá žádné atributy.

Design: David Kolář - www.micropro.cz
Autor textů: Dušan Janovský - www.jakpsatweb.cz


HTML Příručka - Tag HEAD

Syntaxe | <head>...</head>
Popis | Hlavička dokumentu, která se nezobrazuje. Obsahuje nepovinně další tagy (title, meta, link, style, script aj.). Pokud v hlavičce použijete prostý text, v některých prohlížečích se zobrazí na začátku stránky.
Atributy | Tag <head> nemá žádné atributy.


HTML Příručka - Tag BODY

Syntaxe | <body>...</body>
Popis | Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky.
Atributy Všechny níže zmíněné atributy tagu body (vyjma obecných) jsou zastaralé a nahrazují se využitím CSS vlastností nastavených pro tag body (doporučené CSS vlastnosti jsou uvedené v pravém sloupci tabulky).

Atribut | Význam | Hodnoty | Nahrazení CSS
bgcolor | barva pozadí | barva | background-color
background | obrázek pozadí | url obrázku | background-image
text | barva popředí (textu) | barva | color
link | barva nenavštívených odkazů | barva | a:link { color: ... }
vlink | barva navštívených odkazů | barva | a:visited { color: ... }
alink | barva klikaných odkazů (a pod tabulátorem) | barva | a:active { color: ... }
bgproperties | posouvání obrázkového pozadí | scroll | fixed | background-attachment
scroll | rolování těla (raději neměňte) | yes | no | overflow
leftmargin | levý okraj | pixely | margin-left
topmargin | horní okraj | pixely | margin-top
rightmargin | pravý okraj (ne v NN) | pixely | margin-right
bottommargin | spodní okraj (ne v NN) | pixely | margin-bottom
marginwidth | levý a pravý (pouze NN) | pixely | margin
marginheight | horní a spodní (pouze NN) | pixely | margin

Dále jsou podporovány obecné atributy a události.


HTML Příručka - Tag !DOCTYPE

Syntaxe <!doctype ... >
Popis Specifikace DTD. Píše se úplně na začátek souboru, ještě před značku <html>. Není nutné to dělat, ale podle standardu značkovacích jazyků SGML a XML je vhodné strukturovanou formou říci, že tento dokument je HTML dokument; navíc se udává verze HTML, které to odpovídá. Význam to bude mít v budoucnu, až se budou dokumenty zpracovávat více automaticky.

Příklady:
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">


HTML Příručka - Tag ! - poznámka

Syntaxe <!-- ... -->
Popis Všechno, co je v HTML souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.

U poznámek však platí následující výjimky:
  • Poznámky se do sebe nesmí vnořovat
  • Uvnitř tagů <style> a <script> se obsah balí do poznámek, aby byl ignorován staršími prohlížeči. Nové prohlížeče poznámku ignorují a správně interpretují obsah jako styl nebo skript, nikoli tedy jako HTML. Obalování do poznámek je už dnes však zcela zbytečné.
  • Některé programy a skripty používají poznámky na vkládání různých věcí. Za znak poznámky se pak dává nějaký řetězec.
    Např.: <!--# je SSI vložka -->, <!--webbot je vložka FrontPage -->
  • Specifikace říká, že v ukončení poznámky, tedy v sekvenci --> může být mezera nebo jiné znaky. Takže toto: -- > je také konec poznámky. Dávejte si pozor, abyste do poznámky nepsali dvě pomlčky za sebou -- protože potom stačí jeden pravý zobáček > a tohle už pak není poznámka
Pomocí poznámek určitého tvaru se dá dosáhnout nestandardního chování Internet Exploreru. Říká se tomu conditional comments.

Více informací o podmíněných poznámkách naleznete zde.


HTML Příručka - Tag B

Syntaxe | <b>...</b>
Popis | Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se <strong>, což je logické zvýraznění realizované tučným písmem.


HTML Příručka - Tag I

Syntaxe | <i>...</i>
Popis | Kurzíva (z angl. "italic"). Bývá zaměňován za <em>, což je logické zvýraznění realizované kurzívou.


HTML Příručka - Tag U

Syntaxe <u>...</u>
Popis Podtržení (z angl. "underline"). Doporučuji nepoužívat a to následujících důvodů:
  • Podtržený text se plete s odkazy
  • Typograficky není podtržení nic hezkého
Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.


HTML Příručka - Tag S

Syntaxe | <s>...</s>
Popis | Přeškrtnutý text (z angl. "strike"). Vizte též <strike> a <del>


HTML Příručka - Tag STRIKE

Syntaxe | <strike>...</strike>
Popis | Přeškrtnutý text. Vizte též <s> a <del> Přeškrtnutý text lze nahradit CSS stylem text-decoration: line-through.


HTML Příručka - Tag SUB

Syntaxe | <sub>...</sub>
Popis | Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít vícekrát za sebou. Stejného efektu jako tagem <sub> se dá dosáhnout pomocí CSS stylu vertical-align: sub. Ale <sub> je dobrý tag na vyznačení sémantiky (smyslu) textu. Vždy, když děláte dolní index, např. H2SO4, používejte tag <sub>. Pokud chcete udělat jenom grafický efekt (a zvýrazňovaný prvek není dolním indexem), použijte styl vertical-align: sub.


HTML Příručka - Tag SUP

Syntaxe | <sup>...</sup>
Popis | Horní index (z angl. "superscript"). Platí pro něj totéž, co pro <sub>, akorát že ekvivalentní styl je vertical-align: super, nikoli vertical-align: sup.


HTML Příručka - Tag SMALL

Syntaxe | <small>...</small>
Popis | Zmenšení písma o jeden stupeň. Možno použít vícekrát za sebou. Stejného výsledku dokážete pomocí tagu <font size="-1"> ... </font>.


HTML Příručka - Tag BIG

Syntaxe | <big>...</big>
Popis | Zvětšení písma o jeden stupeň. Možno použít vícekrát za sebou. Stejného výsledku dokážete pomocí tagu <font size="+1"> ... </font>.


HTML Příručka - Tag FONT

Syntaxe <font>...</body>
Popis Nastavení barvy, velikosti a fontu písma.

Je doporučováno tag <font> nepoužívat (je zastaralý). Lze jej nahradit tagem <span> s atributem style s definicí CSS stylu nebo s předem definovanou třídou.

Příklad: <span style="color: red; font-family: Arial, Helvetica">červené písmo Arialem</span>
Atributy
Atribut | Význam | Hodnoty | Nahrazení CSS
color | barva písma | barva | color
size | celikost, stupen písma | 1 až 7 | +1 až +6 | -1 až -6 | font-size
face | font, druh písma | jména fontu oddelená cárkami | font-family

Dále jsou podporovány obecné atributy a události.
Popis atributů face
U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název, jde k dalšímu), ale v praxi je nutno zůstat u Arialu (varianty Helvetica, Verdana, sans-serif), Timesu (serif) a Courieru (monotype), protože jen u nich je jistota, že budou na klientském počítači zobrazeny správně a s češtinou.
size
Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML. Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst, až po kravskou velikost 7. Běžné písmo je stupeň číslo 3. Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo zvětšovat a zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit - Velikost písma (nebo tak něco - v každém prohlížeči to může být jinak). Přesné velikosti písma lze dosáhnout pouze pomocí CSS. Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např. size="+1" znamená zvětšení písma o jeden stupeň. V praxi doporučuji <font size="..."> vůbec nepoužívat a velikost písma definovat pomocí CSS stylu font-size.


HTML Příručka - Tag BASEFONT

Syntaxe | <basefont />
Popis | Základní, přednastavený font pro celou stránku. Musí se deklarovat bezprostředně za tagem <body>. Nepárový tag. Má stejné atributy jako <font>, ale u velikosti nelze použít relativní stupeň. Používání tohoto tagu se silně nedoporučuje, protože se jeho vlastnosti nevztahují na tabulky a občas ani na nadpisy. Podpora v moderních prohlížečích je vágní a nejistá. Prostě je zastaralý. Příklad: <body><basefont face="arial" color="navy">Tmavomodrý Arial bude na celé stránce. Snad. Tag basefont se dá velmi snadno nahradit tím, že se příslušné vlastnosti písma nastaví pomocí CSS stylů pro tag <body>. Například: <style> body {font-family: arial; color: navy;} </style>
Atributy | Obsahuje stejné atributy jako tag <font>.


HTML Příručka - Tag BLINK

Syntaxe | <blink>...</blink>
Popis | Blikající písmo (z angl. blink = mrkat). Podporováno pouze Netscapem, Operou a Mozillou. Nahraditelné stylem text-decoration: blink (se stejnou podporou).


HTML Příručka - Tag NOBR

Syntaxe | <nobr>...</nobr>
Popis | Zakázané zalomení řádku. Text se prostě nezalomí, i kdyby došel do konce stránky. Používá se zejména v odkazových proužcích a sloupečcích, aby nebyly odkazy rozhozené přes dva řádky. V moderním webdesignu se používání tagu <nobr> nedoporučuje a nahrazuje se CSS stylem white-space: nowrap. Upřímně je však nutno přiznat, že ten styl ne vždy funguje spolehlivě, takže tag <nobr> rozhodně nepatří do starého železa. Existuje také nestandardní tag <wbr>, který umožňuje zalomení uvnitř <nobr> a volitelné zalomení velmi dlouhých slov. Nevím, jak je podporován, každopádně funguje v IE i v Mozille.


HTML Příručka - Tag SPAN

Syntaxe | <span>...</span>
Popis | Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku.
Atributy | Podporovány jsou jen obecné atributy. Z nich nejvýznamnější jsou atribudy style, class a id.


HTML Příručka - Tag STRONG

Syntaxe <strong>...</strong>
Popis Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl:
  • tagem <b> říkám, že je něco tučným písmem
  • tagem <strong> říkám, že je něco důležité, zvýrazněné
Někomu to připadá jako totéž, já tam ale rozdíl vidím.


HTML Příručka - Tag EM

Syntaxe | <em>...</em>
Popis | Zvýraznění (z angl. emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro zvýrazňování (a pro tento účel jen zřídka používaný). Totéž co u <strong>: <i> je kurzíva, <em> je zvýraznění, které se náhodou vykresluje kurzívou.


HTML Příručka - Tag CITE

Syntaxe | <cite>...</cite>
Popis | Citace, která na rozdíl od blokové citace <blockquote> nezalamuje řádek (je in-line). Takřka neužívaný tag zobrazovaný kurzívou. Některé vyhledávače prý neindexují vnitřek tohoto tagu, protože se domnívají, že jde o externí citaci.


HTML Příručka - Tag CODE

Syntaxe | <code>...</code>
Popis | Výpis kódu, například programu. Prohlížeče používají neproporcionální písmo (strojopis). Velmi zřídka používaný tag, já jej používám na výpis kódových příkazů.


HTML Příručka - Tag DFN

Syntaxe | <dfn>...</dfn>
Popis | Definice nového výrazu. Prohlížeče to zobrazují kurzívou nebo tučnou kurzívou. Prakticky nepoužívaný tag.


HTML Příručka - Tag KBD

Syntaxe | <kbd>...</kbd>
Popis | Vstup z klávesnice zobrazený strojopisem. Nepoužívaný tag.


HTML Příručka - Tag SAMP

Syntaxe | <samp>...</samp>
Popis | "Vzorek" (z angl. sample), což znamená výstup programu. Zobrazováno strojopisem. Občas to používám, když chci naznačit, že se jedná o nějaký výstup nebo prostě něco odlišného od normálního textu.


HTML Příručka - Tag TT

Syntaxe | <tt>...</tt>
Popis | Teletypový terminál. Že nevíte, co to je? Já také ne. (Nabízí se výraz "dálnopis", což ale problematiku spíše zatemňuje. Asi je to text konzoly vzdáleného připojení terminálu.) Zobrazováno strojopisem.


HTML Příručka - Tag VAR

Syntaxe | <var>...</var>
Popis | Proměnná. Zobrazováno kurzívou. Použití snad jen mezi programátory pro formátování zdrojáků.


HTML Příručka - Tag ABBR

Syntaxe | <abbr>...</abbr>
Popis | Něco jako vysvětlení zkratky. Zajímavým atributem je obecný atribut title, který by jako hodnotu měl obsahovat význam té zkratky. Často se používá v blozích. Internet Explorer <abbr> nepodporuje (nerozezná tag). Nové v HTML 4.0. Příklad: <abbr title="Cascading Style Sheets">CSS


HTML Příručka - Tag ACRONYM

Syntaxe | <acronym>...</acronym>
Popis | Totéž, co <abbr>, rozdíl je v tom, že písmena se nehláskují, ale čtou dohromady (např. NATO). Internet Explorer tag acronym zná (narozdíl od abbr).


HTML Příručka - Tag DEL

Syntaxe | <del>...</del>
Popis | Odstraněný text. Prohlížeče jej zobrazují jako přeškrtnutý, staré prohlížeče jej zobrazí normálně. Novinka v HTML 4.0. Osobně raději odstraněný text mažu, ale jsou případy, kdy se vyplatí tag del používat - zejména ve zpravodajství při vyznačení opravy chyby. Tagy del a ins nejsou ani blokové, ani in-line. Mohou obsahovat další blokové tagy, aniž by zalamovaly řádek.


HTML Příručka - Tag INS

Syntaxe <ins>...</ins>
Popis Přidaný text. Zobrazováno podtržením.

Podtržení lze samozřejmě zrušit CSS zápisem text-decoration: none.
Atributy
Atribut | Význam | Formát
datetime | Datum a čas přidání | rrrr-mm-ddThh:mm:ssTZD


HTML Příručka - Tag Q

Syntaxe | <q>...</q>
Popis | Citace (angl. quote = citovat) podle definice HTML 4.0, svou funkcí velmi podobná tagu <cite> a <blockquote>. Liší se atributem cite, která obsahuje zdroj citace.
Atributy
Atribut | Význam | Hodnoty
cite | Uvádí zdroj citace | Text


HTML Příručka - Úvodní stránka

Popis HTML tagů a jejich atributů, jak jsou podporovány hlavními prohlížeči Internet Explorer, Mozilla, Opera. Manuál nepíšu podle html reference nebo specifikace, ale ze zkušeností.